<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="../../../include/meta.jsp"%>
<title>用户管理-通用权限管理系统</title>
<%@include file="../../../include/css.jsp"%>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/lib/jquery-treegrid/0.3.0/css/jquery.treegrid.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/lib/bootstrap-table/1.18.3/bootstrap-table.min.css">
<style type="text/css">
</style>
</head>
<body>
	<%@include file="../include/header.jsp"%>

	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="#"><i
					class="fas fa-home"></i>&nbsp;主页</a></li>
			<li class="breadcrumb-item">系统管理</li>
			<li class="breadcrumb-item active" aria-current="page">功能模块管理</li>
		</ol>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-11">
				<button type="button" class="btn btn-primary">添加</button>
				<button type="button" class="btn btn-success">刷新</button>
			</div>
			<div class="col-1">
				<button type="button" class="btn btn-secondary btn-block">返回</button>
			</div>
		</div>
		<br>
		<div class="row">
			<div class="col-12">
				<table id="table"></table>
			</div>
		</div>
	</div>


	<%@include file="../../../include/js.jsp"%>

	<script
		src="${pageContext.request.contextPath}/lib/jquery-treegrid/0.3.0/js/jquery.treegrid.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/lib/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/lib/bootstrap-table/1.18.3/locale/bootstrap-table-zh-CN.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/lib/bootstrap-table/1.18.3/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>

	<script type="text/javascript">
		$(function() {
			$("#table").bootstrapTable({
				url : "${pageContext.request.contextPath}/api/function/list",
				idField: 'id',
				treeShowField : 'name',
				parentIdField : 'parent',
				columns : [ {
					field : 'name',
					title : '功能模块名'
				}, {
					field : 'type',
					title : '类型',
					align:"center",
					formatter:function(value, row, index){
						if(value==="1"){
							return "功能组";
						}else{
							return "功能模块";
						}
					}
				}, {
					field : 'code',
					title : '功能模块代码'
				},{
					field:"id",
					title :"操作",
					align:"center",
					formatter:function(){
						return '<button id="remove" class="btn btn-info btn-sm" title="编辑"><i class="fa fa-edit"></i></button>&nbsp;<button id="remove" class="btn btn-danger btn-sm" title="删除"><i class="fa fa-trash"></i></button>';
					}
				}],
				treeEnable:true,
      			onPostBody: function() {
		        	var columns =$("#table").bootstrapTable('getOptions').columns;
			        if (columns && columns[0][1].visible) {
			          $("#table").treegrid({
			            treeColumn: 0,
			            onChange: function() {
			              $("#table").bootstrapTable('resetView')
			            }
			          });
			        }
		      }
			});
		});
	</script>
</body>
</html>